<template>
  <div class="app-container">
    <el-form
      :show-message="!($route.query.isInfo || isInfo)"
      ref="elForm"
      :disabled="$route.query.isInfo || isInfo"
      :model="formData"
      :rules="rules"
      size="medium"
      label-width="120px"
    >
      <h2 style="text-align: center">离职申请单</h2>
      <h4 class="form-header h4">基本信息</h4>
      <el-row :gutter="15">
        <el-col :span="8">
          <el-form-item label="离职编号" prop="applyNo">
            <el-input
              v-model="formData.applyNo"
              placeholder="保存后自动生成"
              clearable
              disabled
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="员工" prop="userId">
            <UserDialog
            :status="null"
            :flag="1"
            :becomeShow="true"
              v-model="formData.userId"
              @change="changeUser"
            ></UserDialog>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="申请时间" prop="applyDate">
            <el-date-picker
              disabled
              v-model="formData.applyDate"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :style="{ width: '100%' }"
              placeholder="请选择申请时间"
              clearable
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="部门" prop="deptId">
            <el-input
              v-model="formData.deptName"
              placeholder="请输入部门"
              :disabled="true"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="岗位" prop="postId">
            <el-input
              v-model="formData.postName"
              placeholder="请输入岗位"
              :disabled="true"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="入职日期" prop="joinDate">
            <el-date-picker
              v-model="formData.joinDate"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :style="{ width: '100%' }"
              placeholder="请选择入职日期"
              clearable
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="离职日期" prop="leaveDate">
            <el-date-picker
              v-model="formData.leaveDate"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :style="{ width: '100%' }"
              placeholder="请选择离职日期"
              clearable
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="离职类型" prop="leaveTypeValue">
            <el-select
              v-model="formData.leaveTypeValue"
              placeholder="请选择离职类型"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="dict in dict.type.sys_leave_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="离职原因" prop="leaveReasonValue">
            <el-select
              v-model="formData.leaveReasonValue"
              placeholder="请选择离职原因"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="dict in dict.type.sys_leave_reason"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="备注" prop="remark">
        <el-input
          v-model="formData.remark"
          type="textarea"
          placeholder="请输入多行文本备注"
          :autosize="{ minRows: 4, maxRows: 4 }"
          :style="{ width: '100%' }"
        ></el-input>
      </el-form-item>
      <h4
        class="form-header h4"
        v-if="($route.query.isInfo || isInfo) && formData.oss"
      >
        附件信息
      </h4>
      <el-form-item
        label=""
        prop="oss"
        v-if="($route.query.isInfo || isInfo) && formData.oss"
      >
        <FileUploadBase
          :isDelete="!($route.query.isInfo || isInfo)"
          v-model="formData.oss"
        ></FileUploadBase>
      </el-form-item>

      <el-col :span="24" v-if="btnShow">
        <el-form-item
          label-width="0"
          style="text-align: center; margin-top: 30px"
        >
          <el-button
            v-if="!($route.query.isInfo || isInfo)"
            type="primary"
            @click="submitForm"
            >提交</el-button
          >
          <el-button @click="resetForm">返回</el-button>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>

<script>
import store from "@/store";

import {
  applyAdd,
  updategApply,
  infoApply,
} from "@/api/finance/personnel/apply.js";
import { userSelect } from "@/api/system/user.js";
import { getuser } from "@/api/finance/bxgl/index.js";
import { queryByLoginId } from "@/api/finance/personnel/contract.js";

export default {
  components: {},
  props: {
    isInfo: {
      type: Boolean,
      default: false,
    },
    id: {
      type: String,
      default: "",
    },
    btnShow: {
      type: Boolean,
      default: true,
    },
  },

  dicts: ["sys_leave_type", "sys_leave_reason"],
  data() {
    return {
      formData: {
        applyNo: undefined,
        userId: undefined,
        deptId: undefined,
        joinDate: "",
        leaveDate: null,
        applyDate: "",
        postName: undefined,
        deptName: undefined,
        postId: undefined,
        leaveTypeValue: undefined,
        leaveReasonValue: undefined,
      },
      rules: {
        leaveTypeValue: [
          {
            required: true,
            message: "请输入离职类型",
            trigger: "change",
          },
        ],
        leaveReasonValue: [
          {
            required: true,
            message: "请输入离职原因",
            trigger: "change",
          },
        ],
        deptId: [
          {
            required: true,
            message: "请输入部门",
            trigger: "change",
          },
        ],
        postId: [
          {
            required: false,
            message: "请输入岗位",
            trigger: "blur",
          },
        ],
        applyNo: [
          {
            required: false,
            message: "请输入合同编号",
            trigger: "blur",
          },
        ],
        userId: [
          {
            required: true,
            message: "请选择员工",
            trigger: "change",
          },
        ],

        oss: [
          {
            required: false,
            message: "附件不能为空",
            trigger: "change",
          },
        ],

        joinDate: [
          {
            required: true,
            message: "请选择入职日期",
            trigger: "change",
          },
        ],
        leaveDate: [
          {
            required: true,
            message: "请选择离职日期",
            trigger: "change",
          },
        ],
        toOfficialDate: [
          {
            required: true,
            message: "请选择申请转正日",
            trigger: "change",
          },
        ],
        applyDate: [
          {
            required: true,
            message: "请选择申请时间",
            trigger: "change",
          },
        ],
      },
      userList: [],
    };
  },
  computed: {},
  watch: {},
  created() {
    if (this.$route.query.isEdit || this.$route.query.isInfo || this.isInfo) {
      this.getinfo();
    }
    this.formData.applyDate = this.parseTime(new Date(), "{y}-{m}-{d}");

    // this.formData.userId = store.state.user.id;
    this.queryByLoginId();

    // this.userSelect();
  },
  mounted() {},
  methods: {
    queryByLoginId() {
      queryByLoginId(this.$route.query.id || this.id).then((response) => {
        // this.formData = response.data;
        if (response.data) {
          this.formData.joinDate = response.data[0].startDate;
        }
        console.log(response);
      });
    },
    changeUser(e) {
      console.log(e,'e');
      this.formData.nickName = e.nickName;
      this.formData.deptName = e.dept&&e.dept.deptName;
      this.formData.deptId = e.dept&&e.dept.deptId;
      this.formData.postId = e.sysUserVo&&e.sysUserVo.posts[0].postId;
      this.formData.postName = e.sysUserVo&&e.sysUserVo.posts[0].postName;
      this.formData.userId = e.userId

    },
    // getUser(e) {
    //   getuser(e).then((response) => {
    //     this.formData.deptName = response.data.user.dept.deptName;
    //     this.formData.deptId = response.data.user.dept.deptId;
    //     this.formData.postId = response.data.posts[0].postId;
    //     console.log(this.formData.postId);
    //     this.formData.postName = response.data.posts[0].postName;
    //     this.formData.nickName = response.data.user.nickName;
    //     console.log(this.formData);
    //   });
    // },
    userSelect() {
      userSelect().then((response) => {
        this.userList = response.data;
      });
    },

    getinfo() {
      return infoApply(this.$route.query.id || this.id).then((response) => {
        // this.formData = response.data;
      });
    },

    submitForm() {
      console.log(this.formData,'this.formData');

      this.$refs["elForm"].validate((valid) => {
        if (valid) {
          let query = JSON.parse(JSON.stringify(this.formData));
          query.leaveTypeLabel = this.dict.type.sys_leave_type.find(
            (i) => i.value === query.leaveTypeValue
          ).label;
          query.leaveReasonLabel = this.dict.type.sys_leave_reason.find(
            (i) => i.value === query.leaveReasonValue
          ).label;
          console.log(query);
          if (this.formData.leaveApplyId != undefined) {
            updategApply(query).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.resetForm();
            });
          } else {
            applyAdd(query).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.resetForm();
            });
          }
        }
      });
    },
    resetForm() {
      this.$tab.closeOpenPage();
    },
  },
};
</script>
